<template>
  <a-table
    :components="tableComponents"
    :loading="loading"
    :columns="columns"
    :data-source="lists"
    :pagination="false"
    :scroll="{ y: 500 }"
    row-key="id">
    <!-- 自定义操作列 -->
    <span slot="operation">
      {{ $t('operation') }}
      <question-mark-tip
        :tip-title="$t('ecuAssembleTypeTip')"
        :popupContainer="getPopupContainer"
      ></question-mark-tip>
    </span>
    <template slot="trimLevelCode" slot-scope="text">
      <table-ellipsis :text="text || '-'"></table-ellipsis>
    </template>
    <template slot="trimLevel" slot-scope="text">
      <table-ellipsis :text="text || '-'"></table-ellipsis>
    </template>
    <template slot="action" slot-scope="text,record">
      <a-select
        :placeholder="$t('ecuAssembleType')"
        v-model="record.ecuAssembleType"
        :getPopupContainer="getPopupContainer">
        <a-select-option v-for="item in ecuAssembleTypeOptions" :key="item.id" :value="item.value">
          {{ $t(item.name) }}
        </a-select-option>
      </a-select>
    </template>
  </a-table>
</template>
<script>
import modelApi from '@/api/modules/system/modelMana'
import TableEllipsis from '@/components/Ellipsis/TableEllipsis'
import QuestionMarkTip from '@/views/components/QuestionMarkTip'
import tableDraggable from '@/utils/tableDraggable'
export default {
  components: {
    TableEllipsis,
    QuestionMarkTip
  },
  props: {
    modelCode: {
      type: String,
      default: ''
    },
    ecuId: {
      type: String,
      default: ''
    },
    ecuModels: {
      type: Array,
      default () {
        return []
      }
    }
  },
  computed: {
    ecuAssembleTypeOptions () {
      return this.$store.state.dict.ecuAssembleTypeOptions
    }
  },
  data () {
    return {
      tableDraggable: {},
      columns: [{
        title: this.$t('stereotypeCode'),
        dataIndex: 'trimLevelCode',
        scopedSlots: { customRender: 'trimLevelCode' },
        width: 200
      },
      {
        title: this.$t('stereotype'),
        dataIndex: 'trimLevel',
        scopedSlots: { customRender: 'trimLevel' },
        width: 200
      },

      {
        slots: {
          title: 'operation'
        },
        dataIndex: 'action',
        scopedSlots: { customRender: 'action' },
        width: 100
      }
      ],
      lists: [],
      loading: false,
      ecuModelsObj: null
    }
  },
  created () {
    this.tableComponents = tableDraggable(this.columns)
  },
  watch: {
    modelCode: {
      immediate: true,
      handler (val) {
        if (val) {
          this.getData()
        } else {
          this.resetData()
        }
      }
    }
  },
  methods: {
    getPopupContainer () {
      return document.body
    },
    getData () {
      this.loading = true
      modelApi.getMyAllModel({ code: this.modelCode, selectAll: true }).then((res) => {
        this.getEcuModelsObj()
        this.lists = res.data.map(item => {
          let ecuAssembleType = 0;
          if (this.ecuModelsObj && this.ecuModelsObj[item.id]) {
            //编辑时原有值
            ecuAssembleType = this.ecuModelsObj[item.id].ecuAssembleType;
          }
          if (!this.ecuId) {
            ecuAssembleType = 1;
          }
          return {
            code: item.code,
            modelId: item.id,
            name: item.name,
            trimLevel: item.trimLevel,
            trimLevelCode: item.trimLevelCode,
            ecuAssembleType: ecuAssembleType
          };
        })
      }).finally(() => {
        this.loading = false
      })
    },
    getEcuModelsObj () {
      if (this.ecuModels.length === 0) {
        this.ecuModelsObj = null
        return
      }
      const obj = {}
      this.ecuModels.forEach(element => {
        obj[element.modelId] = {
          ecuAssembleType: element.ecuAssembleType
        }
      })
      console.log(obj, 'obj')
      this.ecuModelsObj = obj
    },
    // 获取配置数据，无不要后端会当做删除
    getFormData () {
      return this.lists.filter(item => item.ecuAssembleType !== 0)
    },
    resetData () {
      this.lists = []
    }
  }
}
</script>
